import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { getVolunteerNewsDetail } from './api/volunteerService'

export default function VolunteerDetail() {
    const { id }: any = useParams()

    // 新闻详情
    const [newsDetail, setNewsDetail] = useState<any>({})

    // 获取新闻详情
    async function getNewsDetail() {
        const res = await getVolunteerNewsDetail(id);
        console.log(res);
        if (res.data.code === 200) {
            setNewsDetail(res.data.data)
        }
    }

    useEffect(() => {
        getNewsDetail()
    }, [])

    if (Object.keys(newsDetail).length === 0) {
        return <div></div>
    }
    return (
        <div className='news-detail v-news-detail'>
            <h2 className='news-detail-title'>{newsDetail.title}</h2>
            <img className='v-news-detail-img' src={'http://124.93.196.45:10001/' + newsDetail.imgUrl} />
            <div dangerouslySetInnerHTML={{ __html: newsDetail.content.replace(/src="/g, 'src="http://124.93.196.45:10001/') }}></div>
            <div>
                <span style={{ fontWeight: 900 }}>总结：</span>
                {newsDetail.summary}
            </div>
            <div className='v-news-detail-time'>{newsDetail.createTime}</div>
        </div>
    )
}
